<template>
  <div class="login-alls">
    <div class="login-title">登录</div>
    <div class="login-input">
      <div class="login-input-text">
        <span class="el-icon-user keys"></span>
        <input type="text" name="username" placeholder="请输入5~16用户名" @blur="users" v-model="userR" />
      </div>
      <div class="login-input-text">
        <span class="el-icon-key keys"></span>
        <input
          name="password"
          type="password"
          placeholder="请输入6~16密码"
          @blur="passs"
          v-model="passW"
        />
      </div>
      <div class="login-btn" @click="login">登录</div>
    </div>
    <span class="wangjipass">忘记密码？</span>
  </div>
</template>

<script>
// 表单验证输出组件
export default {
  name: "Login",
  data() {
    return {
      userR: "",
      passW: "",
    };
  },
  mounted() {},
  methods: {
    users() {
      let userReg = new RegExp("^[\u4e00-\u9fa5A-Za-z0-9]{5,16}$");
      if (this.userR == "") {
        this.$message({
          message: "用户名不能为空！",
          type: "warning",
        });
      } else if (userReg.test(this.userR)) {
        this.$message({
          message: "用户名格式正确！！！",
          type: "success",
        });
      } else {
        this.$message({
          message: "请输入汉字、英文或数字用户名",
          type: "error",
        });
      }
    },
    // 密码格式验证
    passs() {
      let userReg = new RegExp("^[A-Za-z0-9]{6,16}$");
      if (this.passW == "") {
        this.$message({
          message: "密码不能为空！",
          type: "warning",
        });
      } else if (userReg.test(this.passW)) {
        this.$message({
          message: "密码格式正确！！！",
          type: "success",
        });
      } else {
        this.$message({
          message: "请输入英文或数字的密码",
          type: "error",
        });
      }
    },
    login() {
      if (this.userR !== "" && this.passW !== "") {
        this.$http
          .post("/login", {
            uname: this.userR,
            password: this.passW
          })
          .then((res) => {
            // console.log(res);
            if (res.data.code == 200 && res.data.message == "登录成功！！") {
              console.log("登录成功");
              // this.$router.replace('/')
              // 跳转刷新头像
              location.replace('http://localhost:8080/')
              // 用户密码正确的话加密到sessionStory中做登录状态
              let encodedData = window.btoa(window.encodeURIComponent(this.userR));
              sessionStorage.setItem('cookie-session',encodedData)
            } else {
              this.$message({
                message: "用户名或者密码错误",
                type: "error",
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
el-button {
  list-style: none;
}
.login-alls {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  .wangjipass {
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: rgb(0, 0, 0);
  }
  .wangjipass:hover {
    color: rgb(3, 198, 247);
  }
  .login-title {
    width: 100%;
    text-align: center;
    font-size: 27px;
    font-weight: bold;
    margin: 20px 0;
    color: rgb(0, 0, 0);
  }
  .login-input {
    width: 100%;
    margin: 60px 0px;
    height: auto;
    .login-btn {
      width: 410px;
      height: 50px;
      background: rgb(0, 0, 0);
      color: #fff;
      text-align: center;
      line-height: 50px;
      margin: 50px auto;
      border-radius: 10px;
    }
    .login-input-text {
      margin: 20px 60px;
      text-align: center;
      width: 460px;
      margin-top: 20px;
      display: flex;
      align-items: center;
      input {
        width: 100%;
        height: 38px;
        border: none;
        margin-left: 15px;
        border-radius: 3px;
        padding: 0 20px;
      }
      .keys {
        font-size: 30px;
      }
    }
  }
}
</style>
